<template>
	<div>
		<panle title='生成配置' content="后台功能模块快速生成，一键生成控制层，模型层，视图层"></panle>

		<div class="searchbar">
			<el-row class="pt20">
				<el-col :span="12">
					<el-button size="mini" @click="init()">刷新</el-button>
					<pers-button icon="fa fa-cloud" size="mini" @click="add()" perms="sys:menu:add" type="primary"
						label="导入"></pers-button>
					<pers-button type="danger" size="mini" icon="el-icon-delete" @click="delAll()" perms="sys:role:del"
						label="批量删除"></pers-button>
				</el-col>
				<el-col :span="12" style="text-align: right;">
					<el-form :inline="true" :model="formInline" class="demo-form-inline">

						<el-form-item label="">
							<el-input v-model="formInline.keyword" size="mini" placeholder="请输入角色名称"></el-input>
						</el-form-item>

						<el-form-item>
							<el-button type="primary" size="mini" @click="serach">查询</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</div>



		<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="gid"
			:header-cell-style="{background:'#f9f9f9'}" stripe default-expand-all v-loading="loading">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column prop="name" label="表名称"></el-table-column>
			<el-table-column prop="mname" label="实体名称"></el-table-column>
			<el-table-column prop="comment" label="描述"></el-table-column>
			<el-table-column prop="create_time" label="创建时间"></el-table-column>
			<el-table-column prop="role_id" label="操作">
				<template slot-scope="scope">
					<PersButton type="text" size="mini" label="生成配置" icon="el-icon-info" perms="sys:role:edit"
						@click="gen(scope.row)"></PersButton>
					<PersButton type="text" size="mini" label="删除" icon="el-icon-delete-solid" perms="sys:role:edit"
						@click="delGens(scope.row)"></PersButton>
					<PersButton type="text" size="mini" label="预览" icon="fa fa-eye" perms="sys:role:edit"
						@click="buidGen(scope.row,1)"></PersButton>
					<PersButton type="text" size="mini" icon="el-icon-bottom" perms="sys:role:del" label="生成代码"
						@click="buidGen(scope.row,0)"></PersButton>
				</template>
			</el-table-column>
		</el-table>
		<div class="block">

			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

		<el-dialog :visible.sync="open" width="600px" append-to-body title="选择数据表">

			<el-table :data="tableDatas" style="width: 100%;margin-bottom: 20px;" row-key="gid" border stripe
				default-expand-all v-loading="loading" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="name" label="表名称"></el-table-column>
				<el-table-column prop="comment" label="描述"></el-table-column>
				<el-table-column prop="create_time" label="创建时间"></el-table-column>

			</el-table>
			<div class="block">

				<el-pagination @size-change="handleSizeChanges" @current-change="handleCurrentChanges"
					:current-page="pageNumbers" :page-sizes="[10, 50, 100, 200]" :page-size="pageSizes" background
					layout="total, sizes, prev, pager, next, jumper" :total="totals">
				</el-pagination>
			</div>

			<div slot="footer" class="dialog-footer">
				<el-button @click="open = false" size="small">取 消</el-button>
				<el-button type="primary" @click="srueTables()" size="small">确 定</el-button>
			</div>

		</el-dialog>

		<!-- 生成进度条 -->
		<el-dialog :visible.sync="opens" v-dialogDrag width="600px" class="gendialog" append-to-body title="生成进度"
			:close-on-click-modal="false">
			<el-progress :text-inside="true" :stroke-width="26" :percentage="percentage"></el-progress>
			<div class="perlist">

				<div v-for="(v,i) in percont" :key="i">
					{{v}}<i class="el-icon-loading"></i>
				</div>

			</div>
		</el-dialog>

		<!-- 预览 -->
		<el-dialog :visible.sync="eysopen" v-dialogDrag width="60%" class="gendialog" append-to-body title="预览"
			:close-on-click-modal="false">
			<div style="height: 500px;">
				<el-scrollbar style="height:100%;">
					<el-tabs v-model="activeName" v-highlight @tab-click="handleClicks">
						<el-tab-pane label="model" name="1">
							<pre>
					<code class="php" v-html="model"></code>
				</pre>
						</el-tab-pane>
						<el-tab-pane label="controller" name="2">
							<pre><code class="php" v-html="controller"></code></pre>
						</el-tab-pane>
						<el-tab-pane label="service" name="3">
							<pre><code class="php" v-html="service"></code></pre>
						</el-tab-pane>
						<el-tab-pane label="validate" name="4">
							<pre><code class="php" v-html="validate"></code></pre>
						</el-tab-pane>
						<el-tab-pane label="router" name="5">
							<pre><code class="php hljs" v-html="router"></code></pre>
						</el-tab-pane>
						<el-tab-pane label="api" name="6">
							<pre><code class="js" v-html="api"></code></pre>
						</el-tab-pane>
						<el-tab-pane label="view" name="7">
							<pre><code class="vue" v-html="view"></code></pre>
						</el-tab-pane>

					</el-tabs>
				</el-scrollbar>
			</div>
		</el-dialog>
		<!-- 代码生成部分 -->
		<el-drawer title="配置生成" :visible.sync="gendrawer" :wrapperClosable="false" direction="rtl" class="drawer-main"
			size="70%">
			<div class="close" @click="gendrawer = false">
				<i class="el-icon-close"></i>
			</div>
			<div class="gen-content">

				<div class="gen-body">
					<div class="gen-header">
						<el-tabs v-model="activeName">
							<el-tab-pane label="基本配置" name="1"></el-tab-pane>
							<el-tab-pane label="字段配置" name="2"></el-tab-pane>
						</el-tabs>
					</div>
					<div class="gen-scrollbar">
						<el-scrollbar style="height: 100%;">
							<div style="margin: 10px;">
								<el-form ref="form" :model="form" :rules="rules" label-width="120px">
									<div :class="activeName=='1'?'show':'hidden'">
										<el-row>
											<el-col :span="24">
												<el-form-item label="生成内容" prop="gentype">
													<el-checkbox-group v-model="form.gentype">
														<el-checkbox label="1">Model</el-checkbox>
														<el-checkbox label="2">Controller</el-checkbox>
														<el-checkbox label="3">Service</el-checkbox>
														<el-checkbox label="4">Api</el-checkbox>
														<el-checkbox label="5">View</el-checkbox>
														<el-checkbox label="6">Route</el-checkbox>
													</el-checkbox-group>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="12">
												<el-form-item label="表名称" prop="name">
													<el-input v-model="form.name" :disabled="true" size="mini">
													</el-input>
												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="" prop="mname">
													<template slot="label">
														实体名称
														<el-tooltip slot="append" class="item" effect="dark"
															content="实体类名称" placement="top">
															<i class="el-icon-question"></i>
														</el-tooltip>
													</template>
													<el-input v-model="form.mname" size="mini">

													</el-input>

													<!-- <el-alert show-icon title="实体名称是指Model名称" type="info" :closable="false">
											</el-alert> -->
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="12">
												<el-form-item label="包名" prop="pagepack">
													<template slot="label">
														项目名
														<el-tooltip slot="append" class="item" effect="dark"
															content="项目名是指模块名称" placement="top">
															<i class="el-icon-question"></i>
														</el-tooltip>
													</template>
													<el-input v-model="form.pagepack" size="mini">
													</el-input>

												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="生成功能名" prop="comment">
													<template slot="label">
														生成功能名
														<el-tooltip slot="append" class="item" effect="dark"
															content="用作功能名称,例 用户" placement="top">
															<i class="el-icon-question"></i>
														</el-tooltip>
													</template>
													<el-input v-model="form.comment" size="mini"></el-input>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row :gutter="20">
											<el-col :span="12">
												<el-form-item label="模板类型" prop="type">
													<template slot="label">
														模板类型
														<el-tooltip slot="append" class="item" effect="dark"
															content="单表是指列表的形式,树表是指树形结构的配置如:菜单页面,单页是指如文件配置"
															placement="top">
															<i class="el-icon-question"></i>
														</el-tooltip>
													</template>
													<el-select v-model="form.type" placeholder="请选择模板" size="mini"
														style="width: 100%;">
														<el-option label="单表(增删改查)" :value="0"></el-option>
														<el-option label="树表(增删改查)" :value="1"></el-option>
														<el-option label="单页(增删改查)" :value="2"></el-option>
														<el-option label="主子表(增删改查)" :value="3"></el-option>
													</el-select>

												</el-form-item>
											</el-col>



										</el-row>

										<el-row :gutter="20">
											<el-col :span="12">
												<el-form-item label="生成菜单">
													<template slot="label">
														生成菜单
														<el-tooltip slot="append" class="item" effect="dark"
															content="生成菜单项" placement="top">
															<i class="el-icon-question"></i>
														</el-tooltip>
													</template>
													<el-radio-group v-model="form.is_menu">
														<el-radio :label="1">是</el-radio>
														<el-radio :label="0">否</el-radio>

													</el-radio-group>
												</el-form-item>
											</el-col>
											<el-col :span="12" v-if="form.is_menu ==1">
												<el-form-item label="上级菜单" prop="pagepack">
													<template slot="label">
														上级菜单
														<el-tooltip slot="append" class="item" effect="dark"
															content="选择主菜单,将生成新的,选择其它,则生成其它下" placement="top">
															<i class="el-icon-question"></i>
														</el-tooltip>
													</template>
													<el-input v-model="form.menu_id" size="mini"></el-input>
												</el-form-item>
											</el-col>
										</el-row>

										<el-row :gutter="20">
											<el-col :span="12">
												<el-form-item label="生成路径">
													<el-radio-group v-model="form.is_url">
														<el-radio :label="0">默认</el-radio>
														<el-radio :label="1">自定义</el-radio>

													</el-radio-group>
												</el-form-item>
											</el-col>
											<el-col :span="12" v-if="form.is_url ==1">
												<el-form-item label="自定义">
													<el-input v-model="form.urls" size="mini"></el-input>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row :gutter="20">
											<el-col :span="10">
												<el-form-item label="备注">
													<el-input v-model="form.remks" size="mini" type="textarea"
														:rows="4"></el-input>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row v-if="form.type==1">
											<div style="font-size: 14px;">树表</div>
											<el-divider></el-divider>
										</el-row>
										<el-row :gutter="20" v-if="form.type==1">

											<el-col :span="12">
												<el-form-item label="树编码字段">
													<template slot="label">
														树编码字段
														<el-tooltip slot="append" class="item" effect="dark"
															content="树显示的编号字段" placement="top">
															<i class="el-icon-question"></i>
														</el-tooltip>

													</template>
													<el-select v-model="form.id" placeholder="请选择树编码字段" size="mini"
														style="width: 100%;">
														<el-option v-for="(v,i) in tablesData" :key="i"
															:label="v.field+':'+v.comment" :value="v.field"></el-option>

													</el-select>

												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="树名称字段">
													<template slot="label">
														树名称字段
														<el-tooltip slot="append" class="item" effect="dark"
															content="树显示名称字段" placement="top">
															<i class="el-icon-question"></i>
														</el-tooltip>

													</template>
													<el-select v-model="form.treename" placeholder="请选择树名称字段"
														size="mini" style="width: 100%;">
														<el-option v-for="(v,i) in tablesData" :key="i"
															:label="v.field+':'+v.comment" :value="v.field"></el-option>

													</el-select>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row :gutter="20" v-if="form.type==1">

											<el-col :span="10">
												<el-form-item label="">
													<template slot="label">
														树父编码字段

														<el-tooltip slot="append" class="item" effect="dark"
															content="树父编码字段" placement="top">
															<i class="el-icon-question"></i>
														</el-tooltip>

													</template>
													<el-select v-model="form.parent" placeholder="请选择树父编码字段"
														size="mini">
														<el-option v-for="(v,i) in tablesData" :key="i"
															:label="v.field+':'+v.comment" :value="v.field"></el-option>

													</el-select>
												</el-form-item>
											</el-col>

										</el-row>

										<el-row v-if="form.type==3">
											<div style="font-size: 14px;">主子表</div>
											<el-divider></el-divider>
										</el-row>
										<el-row :gutter="20" v-if="form.type==3">

											<el-col :span="10">
												<el-form-item label="">
													<template slot="label">
														子表的表名

														<el-tooltip slot="append" class="item" effect="dark"
															content="关联的子表的名称" placement="top">
															<i class="el-icon-question"></i>
														</el-tooltip>

													</template>
													<el-select v-model="form.id" placeholder="请选择树编码字段" size="mini">
														<el-option v-for="(v,i) in tableData" :key="i"
															:label="v.field+':'+v.comment" :value="v.field"></el-option>

													</el-select>

												</el-form-item>
											</el-col>
											<el-col :span="10">
												<el-form-item label="子表关联外键">
													<template slot="label">

														子表关联外键

														<el-tooltip slot="append" class="item" effect="dark"
															content="子表关联的外键名" placement="top">
															<i class="el-icon-question"></i>
														</el-tooltip>

													</template>
													<el-select v-model="form.treename" placeholder="请选择树名称字段"
														size="mini">
														<el-option v-for="(v,i) in tableData" :key="i"
															:label="v.field+':'+v.comment" :value="v.field"></el-option>

													</el-select>
												</el-form-item>
											</el-col>
										</el-row>
									</div>

									<div :class="activeName=='2'?'show':'hidden'">
										<el-table :data="tablesData" style="width: 100%;margin-bottom: 20px;"
											row-key="glid" v-loading="loading">
											<el-table-column label="序号" type="index" min-width="5%"
												class-name="allowDrag" />
											<el-table-column prop="field" label="字段名称"></el-table-column>
											<el-table-column prop="type" label="类型"></el-table-column>
											<el-table-column prop="comment" label="描述">
												<template slot-scope="scope">
													<el-input v-model="scope.row.comment" size="mini"></el-input>
												</template>

											</el-table-column>
											<el-table-column prop="data_length" label="是否验证">
												<template slot-scope="scope">
													<el-switch v-model="scope.row.is_val" active-color="#13ce66"
														inactive-color="#ff4949" :active-value="0" :inactive-value="1">
													</el-switch>
													<!-- <el-radio-group v-model="scope.row.val">
							    <el-radio :label="1">是</el-radio>
							    <el-radio :label="0">否</el-radio>

							  </el-radio-group> -->
												</template>

											</el-table-column>
											<el-table-column label="插入">
												<template slot-scope="scope">
													<el-checkbox :true-label="0" v-model="scope.row.is_add">
													</el-checkbox>
												</template>
											</el-table-column>
											<el-table-column label="编辑">
												<template slot-scope="scope">
													<el-checkbox :true-label="0" v-model="scope.row.is_edit">
													</el-checkbox>
												</template>
											</el-table-column>
											<el-table-column label="列表">
												<template slot-scope="scope">
													<el-checkbox :true-label="0" v-model="scope.row.is_list">
													</el-checkbox>
												</template>
											</el-table-column>

											<el-table-column prop="rows" label="视图展示">
												<template slot-scope="scope">
													<el-select v-model="scope.row.is_view" placeholder="请选择字段类型"
														size="mini">
														<el-option label="文本框" :value="0"></el-option>
														<el-option label="文本域" :value="1"></el-option>
														<el-option label="单选框" :value="2"></el-option>
														<el-option label="复选框" :value="3"></el-option>
														<el-option label="下拉框" :value="4"></el-option>
														<el-option label="富文本编辑" :value="5"></el-option>
														<el-option label="时间控件" :value="6"></el-option>
														<el-option label="上传图片" :value="7"></el-option>
													</el-select>
												</template>

											</el-table-column>
										</el-table>
									</div>
								</el-form>
							</div>
						</el-scrollbar>
					</div>
				</div>

				<div class="gen-footer">
					<div style="margin-left: 20px;">
						<el-button type="success" size="small" @click="submitForm('form')">保存配置</el-button>
					</div>
				</div>
			</div>
		</el-drawer>



	</div>
</template>

<script>
	let _self;
	import Panle from '@/components/Panle';
	import PersButton from '@/components/PersButton';
	import {
		buildTabel
	} from '@/api/tool/gen';

	import Sortable from 'sortablejs'
	import {
		listGen,
		delGen,
		selectTables,
		addGen,
		editGen,
		getGen
	} from '@/api/tool/gen';
	export default {
		components: {
			Panle,
			PersButton
		},
		data() {
			return {
				tableData: [],
				loading: false,
				pageSize: 10, //一页显示多少条
				pageNumber: 1,
				total: 0, //总页数
				serachword: '',
				formInline: {},
				open: false,
				pageSizes: 10, //一页显示多少条
				pageNumbers: 1,
				totals: 0, //总页数
				tableDatas: [],
				multipleSelection: [],
				opens: false,
				percentage: 1,
				percont: ['生成准备中....'],
				eysopen: false,
				activeName: "1",
				model: '',
				controller: '',
				service: '',
				api: '',
				validate: '',
				view: '',
				router: '',
				gendrawer: false, //生成抽屉
				activeName: '1',
				form: {
					gentype: []
				},
				rules: {},
				tablesData: [],
			}
		},
		computed: {
			//监听接收到的消息
			// socketMsgs() {
			// 	return this.$websocket.getters.socketMsgs
			// }
		},
		watch: {
			// 'socketMsgs': {
			// 	//处理接收到的消息
			// 	handler: function() {
			// 		let that = this
			// 		let sMsg = that.socketMsgs;
			// 		//console.log(sMsg);
			// 		if (sMsg.type == 'gen') {
			// 			setTimeout(function() {
			// 				that.percentage = sMsg.pros;
			// 				that.percont.push(sMsg.msg);
			// 			}, 500)

			// 		}
			// 	}
			// }
		},
		created() {
			_self = this;
			_self.init();


		},
		methods: {
			init: function() {
				_self.loading = true;
				let param = {
					"pageSize": _self.pageSize,
					"pageNumber": _self.pageNumber,
					"keyword": _self.serachword
				}
				listGen(param).then((res) => {
					if (res.code == 200) {
						_self.tableData = res.data.list;
						_self.total = res.data.total;
						_self.loading = false;
					}
				})
			},
			gen: function(data) {
				let datas = {
					'name': data.gid
				};
				getGen(datas).then((res) => {
					_self.form = res.data;
					_self.tablesData = res.data.genlist;
				})

				_self.gendrawer = true;
				//let tableId = data.gid;
				//_self.$router.push("/gen/edit/" + tableId);

			},
			handleSizeChange: function(e) {
				_self.pageSize = e;
				_self.init();
			},
			handleCurrentChange: function(e) {
				_self.pageNumber = e;
				_self.init();
			},
			handleSizeChanges: function(e) {
				_self.pageSizes = e;
				_self.selectTalbes();
			},
			handleCurrentChanges: function(e) {
				_self.pageNumbers = e;
				_self.selectTalbes();
			},
			add: function() {
				_self.selectTalbes();
				_self.multipleSelection = [];
				_self.open = true;
				_self.eysopen = false;

			},
			selectTalbes: function() {
				let param = {
					"pageSize": _self.pageSizes,
					"pageNumber": _self.pageNumbers,

				}
				selectTables(param).then((res) => {
					_self.tableDatas = res.data.list;
					_self.totals = res.data.total;

				})
			},
			srueTables: function() {
				addGen(_self.multipleSelection).then((res) => {
					_self.open = false
					_self.init();

				})
			},
			handleSelectionChange: function(e) {
				let selectChang = []
				for (let item of e) {
					selectChang.push(item)

				}
				_self.multipleSelection = selectChang;
			},
			buidGen: function(data, type) {
				if (type == 0) {


					_self.percont = ['生成准备中....'];
					_self.percentage = 1;
					_self.opens = true;
				}

				let param = {
					'id': data.gid,
					'type': type
				};
				buildTabel(param).then((res) => {
					if (type == 0 && res.code == 200) {
						_self.percont = ['生成成功....'];
						_self.percentage = 100;
					}
					if (type == 1 && res.code == 200) {
						_self.open = false;
						_self.eysopen = true;
						_self.model = res.data.model;
						_self.controller = res.data.controller;
						_self.service = res.data.service;
						_self.view = res.data.views;
						_self.router = res.data.router;
						_self.validate = res.data.validate;
						_self.api = res.data.api;

					}

				})
			},
			serach: function() {

			},
			delGens: function(param) {
				_self.$confirm('确定删除【' + param.name + '】此规则', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					delGen(param.gid).then((res) => {
						if (res.code == 200) {
							_self.msgSuccess(res.msg);
							_self.init();
						} else {
							_self.msgError(res.msg);
						}
					})


				}).catch(() => {
					_self.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleClicks(tab, event) {

			},
			submitForm: function(data) {
				_self.$refs[data].validate((valid, callback) => {
					if (valid) {
						_self.addset();
					} else {
						return false;
					}
				});
			},
			addset: function() {

				_self.form.list = _self.tablesData;
				editGen(_self.form).then((res) => {
					if (res.code == 200) {
						_self.msgSuccess(res.msg);
						_self.init();
					}
				})
			},

		}

	}
</script>

<style lang="scss">
	@import "@/assets/css/common.scss";

	.demo-form-inline {
		.el-form-item {
			margin-bottom: 0;
		}
	}

	.gendialog {

		.el-dialog__body {
			padding: 10px 20px;
		}
	}

	.perlist {
		background: #2f353f;

		border-radius: 5px;



		div {
			font-size: 12px;
			color: #FFFFFF;
			margin: 5px 10px;
		}

	}

	.drawer-main {
		.el-drawer__header {
			padding: 10px;
			min-height: 40px;
			background-color: #2f353f;
			color: #FFFFFF;
			margin-bottom: 0;

			.el-drawer__close-btn {
				color: #FFFFFF;
			}
		}
	}

	.gen-content {
		width: 100%;
		height: 100%;

		.gen-body {
			height: calc(100% - 50px);
			width: 100%;

			.gen-header {
				height: 50px;
				margin-left: 10px;
				margin-right: 10px;
			}

			.gen-scrollbar {
				height: calc(100% - 50px);

			}

		}

		.gen-footer {
			height: 50px;
			display: flex;
			align-items: center;

		}
	}

	.show {
		display: block;
	}

	.hidden {
		display: none;
	}
</style>
